<template>
  <div class="row">
    <!-- /.u-menu -->
    <div class="u-main">
      <div class="u-tab-wrap">
        <ul class="u-tab clearfix">
          <li class="current"><a>待偿还贷款</a></li></ul>
      </div>
      <div id="tab-box">
        <div id="repay_list_box" class="u-form-wrap" style="padding: 15px;">
          <div style="margin-bottom: 20px;">
              <el-table
                :data="myrepayPageInfo.list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="loansId"
                  label="编号"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="loansTime"
                  label="还款时间"
                  width="180">
                  <template slot-scope="scope">
                    <p>{{scope.row.loansTime | timefilters }}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="loansMoney"
                  label="还款金额">
                </el-table-column>
                <el-table-column
                  prop="loansMonth"
                  label="总还款期限">
                </el-table-column>
                <el-table-column
                  prop="releaseMoney"
                  label="总还款余额">
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态">
                </el-table-column>
                <el-table-column
                  prop="repayType"
                  label="还款类型">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button type="text" @click="open(scope.row.loansId)">还款</el-button>
                  </template>
                </el-table-column>
              </el-table>

            <!--分页-->
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="myrepayPageInfo.total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- /.u-main -->
  </div>
  <!-- /.row -->
</template>

<script>
    export default {
        name: "",
        data() {
          return{
            currentPage:1,
            pagesize:4,
            myrepayPageInfo:{list:[]},
          }
      },
      created(){
          this.axios.post("/api/myrepay/yonghudai",{
            pageNum:this.currentPage,
            pageSize:this.pagesize
          }).then((data)=>{
            this.myrepayPageInfo=data.data
          }).catch(error=>{
            console.log("yonghudai"+error);
          })
      },
      filters: {
        timefilters(val) {
          if (val == null || val == "") {
            return "暂无时间";
          } else {
            let d = new Date(val);   //val 为表格内取到的后台时间
            let month =
              d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
            let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
            let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
            let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
            let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
            let times=d.getFullYear() + '-' + month + '-' + day ;
            return times;
          }
        }
      },
      methods:{
        handleSizeChange: function (size) {
          this.pagesize = size;
        },
        handleCurrentChange: function(currentPage){
          this.currentPage = currentPage;
        },

        open(i) {
          this.$prompt('请输入金额', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(({ value }) => {
            this.axios.post("/api/borrow/giveBrrow",{
              loadId:i,
              money:value
            }).then(data=>{
              if(data.data==1){
                alert("余额不足")
              }
              if(data.data==0){
                alert("还款成功")

              }
            })
            this.$message({
              type: 'success',
              message: '你输入金额: ' + value,

            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消输入'
            });
          });
        }

      }
    }
</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';

</style>
